<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端菜单管理</title>

    <link rel="stylesheet" href="../../static/css/index.css">
    <link rel="stylesheet" href="../../static/eui/element-ui.css">

    <script src="../../static/js/vue.min.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/eui/index.js"></script>

    <script src="../../static/js/App.js"></script>
    <script src="../../static/js/auth.js"></script>
    <script src="../../static/js/checkIsLogin.js"></script>
    <script src="../../static/js/FormBoxComponent.js"></script>
    <script src="../../static/js/DataListComponent.js"></script>
    <script src="../../static/js/RefreshComponent.js"></script>

    <link rel="stylesheet" href="../../static/css/template.css">
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>
    <!--引用form-box-comm组件-->
    <form-box-comm ref="myForm"
                   :box-title="boxTitle"
                   :add-api-url="url"
                   :edit-api-url="url"
                   :model="model"
                   :id-key="model.frontendMenuId"
                   :on-validate="formValidateHandler"
                   :on-success="successHandler">

        <!--添加自己的元素-->
        <template>
            <div class="item">
                <label for="parentName">父级菜单：</label>
                <input id="parentName" v-model="model.parentName" disabled>
            </div>

            <div class="item">
                <label for="frontendMenuName">菜单名称：</label>
                <input id="frontendMenuName" v-model="model.frontendMenuName">
            </div>

            <div class="item">
                <label for="frontendMenuUrl">页面链接：</label>
                <input id="frontendMenuUrl" v-model="model.frontendMenuUrl">
            </div>

            <div class="item">
                <label for="frontendMenuSort">排序：</label>
                <input type="number" id="frontendMenuSort" v-model="model.frontendMenuSort">
                <span>务必填写，建议：分类一：100、101、102；分类二：200、201；以此类推</span>
            </div>
            <div class="item">
                <label for="description">说明：</label>
                <input id="description" v-model="model.description">
            </div>
        </template>
        <!--添加自己的元素 结束-->
    </form-box-comm>

    <!--引用data-list-comm组件-->
    <data-list-comm ref="myList"
                    :list-api-url="url"
                    :delete-api-url="url"
                    row-id-key="frontendMenuId"
                    :on-add-new-form="onAddNewFormHandler"
                    ref-parent="true">

        <!--自定义表头,覆盖默认模板-->
        <template>
            <tr slot="dataHead" class="h">
                <td>父级</td>
                <td>菜单名称</td>
                <td>页面链接</td>
                <td>排序</td>
                <td>说明</td>
                <td>操作</td>
            </tr>
        </template>
        <!--自定义内容器,覆盖默认模板-->
        <template>
            <tr is="tr" v-if="modelList !=null && modelList.length>0"
                v-for="item in modelList"
                :style="item.pid==null? {backgroundColor:backgroundColor}:{}">

                <td>{{item.parentName}}</td>
                <td>{{item.pid==null? "+"+item.frontendMenuName:"—"+item.frontendMenuName}}</td>
                <td>{{item.frontendMenuUrl}}</td>
                <td>{{item.frontendMenuSort}}</td>
                <td>{{item.description}}</td>
                <td>
                    <button @click="onEditFormHandler(item)">编辑</button>
                    <button @click="del(item)">删除</button>
                    <button @click="addChild(item)" v-if="item.pid==null">添加子菜单</button>
                </td>
            </tr>
        </template>
    </data-list-comm>
</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '新增菜单',
            url: global_api_url + "sysFrontendMenuTable",
            //父级背景颜色
            backgroundColor: '#ECECEC',

            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            //对象
            model: {
                frontendMenuId: null,
                frontendMenuName: null,
                frontendMenuUrl: null,
                parentName: null,
                pid: null,
                frontendMenuSort: null,
                description: null
            },
            modelList: null
        },


        /**
         * 必须设置async，且是mounted方法内执行，否则无法取到有异步请求远程数据
         */
        async mounted() {
            //此方法内有异步，必须设置等待
            await this.$refs.myList.getModelList();
            this.modelList = this.$refs.myList.modelList;
            //console.log("this modelList======",this.modelList);
        },

        methods: {

            /**
             * 挂载表单保存数据前，验证方法
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                //console.log(model);
                if (model.frontendMenuName != null && model.frontendMenuName != "") {
                    return true;
                } else {
                    alert("请输入菜单名称！");
                    return false;
                }
            },

            /**
             * 数据保存成功后执行
             */
            successHandler(data) {
                //console.log(data);
                //this.$refs.myList.getModelList();
                this.$refs.myForm.closeForm();
            },

            /**
             * 挂载新建表单方法
             */
            onAddNewFormHandler() {
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = '新增菜单';

                //恢复原样
                this.model = {};
            },

            /**
             * 挂载获得编辑表单方法
             */
            onEditFormHandler(item) {
                //打开窗口
                this.$refs.myForm.showForm();
                this.boxTitle = `正在修改[${item.frontendMenuName}]`;

                //赋值
                this.model = item;
            },

            /**
             * 想显示父节点名称的话，后端查询要自身表关联。
             */
            addChild(item) {
                //恢复原样
                this.model = {};
                //打开窗口
                this.$refs.myForm.showForm();

                //把当前的ID赋给子节点的pid
                this.model.pid = item.frontendMenuId;
                //把当前的菜单名赋给子节点父级名
                this.model.parentName = item.frontendMenuName;

            },

            /**
             * 删除数据
             * @param frontendMenuId
             */
            del(item) {
                //直接调用子组件方法
                this.$refs.myList.del(item);
            }
        }
    });

</script>
</body>
</html>